<template>
  <v-row no-gutters class="kiosk">
    <v-col cols="3" class="Report">
      <Report
        @active="activeReport"
        :selected="selectedReport"
        :reportProblemList="reportProblemList"
        :signOffList="signOffList"
        :loadingReportProblem="loadingReportProblem"
        :loadingSignOff="loadingSignOff"
      ></Report>
    </v-col>
    <v-col cols="9" class="NewProblem">
      <NewProblem
        @submit="openSaveDialog"
        ref="newProblem"
        :isReportProblem="isReportProblem"
      ></NewProblem>
    </v-col>
    <Dialog
      v-model="showDialog"
      :show-save="false"
      :title="dialogTitle"
      width="480"
    >
      <Save
        :subtitle="saveSubtitle"
        @submit="saveProblem(reportFormData)"
      ></Save>
    </Dialog>
  </v-row>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import Report from "@/components/Kiosk/Report/Report.vue";
import NewProblem from "@/components/Kiosk/NewProblem/NewProblem.vue";
import Save from "@/components/Customer/Dialog/Save/Save.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import { IReport } from "@/components/Kiosk";
@Component({
  components: {
    Report,
    NewProblem,
    Save,
    Dialog,
  },
})
export default class Kiosk extends Vue {
  // 1.AddProblem 2.EditProblem
  step = 1;
  // dialog
  dialogTitle = "";
  showDialog = false;
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  get saveSubtitle() {
    if (this.step === 1 && this.reportFormData) {
      return `Add ${this.reportFormData.SRCate}- ${this.reportFormData.type}`;
    } else if (this.step === 2 && this.selectedReport) {
      return `Edit ${this.selectedReport.SRCate}- ${this.selectedReport.type}`;
    }
    return "";
  }
  async openSaveDialog() {
    const result = await (
      this.$refs.newProblem as NewProblem
    ).validateFormData();
    if (result) {
      this.dialogTitle = "Save";
      this.reportFormData = result;
      this.openDialog();
    }
  }
  // Report Problem
  loadingReportProblem = false;
  get reportProblemList() {
    return this.$store.state.KioskStore.reportProblemList;
  }
  getReportProblemList() {
    this.loadingReportProblem = true;
    setTimeout(() => {
      this.$store.commit("setReportProblemList", [
        {
          id: "1",
          SRCate: "DL",
          type: "Delivery",
          departmentDescription: "FSE- Field Service Engineer ",
          floor: "Cable TV Tower, 9 Hoi Shing Road,",
          district: "Tsuen Wan",
          problemCate: "TT1",
          problemDescription: "Steam system failure",
          contactPerson: "Angela Lo",
          contactNumber: "64932109",
          signature: null,
        },
      ]);
      this.loadingReportProblem = false;
    }, 1500);
  }
  // Sign Off
  loadingSignOff = false;
  get signOffList() {
    return this.$store.state.KioskStore.signOffList;
  }
  getSignOffList() {
    this.loadingSignOff = true;
    setTimeout(() => {
      this.$store.commit("setSignOffList", [
        {
          id: "233",
          SRCate: "DN",
          type: "Delivery and Installment",
          departmentDescription: "FSE- Field Service Engineer ",
          floor: "Cable TV Tower, 9 Hoi Shing Road,",
          district: "Tsuen Wan",
          problemCate: "TT1",
          problemDescription: "System Parts Missing",
          contactPerson: "Angela Lo",
          contactNumber: "64932109",
          signature: null,
        },
      ]);
      this.loadingSignOff = false;
    }, 1800);
  }
  // Report
  reportFormData: IReport | null = null;
  get isReportProblem() {
    return this.$store.state.KioskStore.isReportProblem;
  }
  set isReportProblem(isReportProblem: boolean) {
    this.$store.commit("setIsReportProblem", isReportProblem);
  }
  get selectedReport() {
    return this.$store.state.KioskStore.selectedReport;
  }
  set selectedReport(report: IReport | null) {
    this.$store.commit("setSelectedReport", report);
  }
  @Watch("selectedReport", { immediate: true })
  onSelectedReportChange(report: IReport) {
    if (this.step === 1 && report) {
      this.$nextTick(() => {
        this.activeReport(report, this.isReportProblem);
      });
    }
  }
  activeReport(report: IReport, isReportProblem: boolean) {
    this.selectedReport = report;
    this.isReportProblem = isReportProblem;
    this.editReportData(report);
  }
  // action
  saveProblem(result: IReport | null) {
    if (!result) {
      return;
    }
    if (this.step === 1) {
      this.reportProblemList.push(result);
      this.activeReport(result, true);
    } else if (this.step === 2) {
      Object.assign(this.selectedReport as IReport, result);
    }
    this.closeDialog();
  }
  newProblem() {
    this.step = 1;
    this.selectedReport = null;
    (this.$refs.newProblem as NewProblem).showNewProblem();
  }
  editReportData(report: IReport) {
    this.step = 2;
    (this.$refs.newProblem as NewProblem).getReportData(report);
  }
  mounted() {
    if (!this.reportProblemList.length) {
      this.getReportProblemList();
    }
    if (!this.reportProblemList.length) {
      this.getSignOffList();
    }
    this.$bus.$on("showNewProblemModulePart", this.newProblem);
    this.$bus.$on("setReportData", this.editReportData);
  }
  beforeDestroy() {
    this.$bus.$off("showNewProblemModulePart");
    this.$bus.$off("setReportData");
  }
}
</script>

<style lang="scss" scoped>
@import "@/views/21000000-Kiosk/index.scss";
</style>
